<template>
  <div class="details-root">
    <van-nav-bar title="详情" left-text="返回" left-arrow @click-left="handleRouterBack">
      <template #right>
        <van-popover
          v-model:show="showPopover"
          theme="dark"
          trigger="click"
          :actions="actions"
          @select="onSelect"
          placement="bottom-end"
        >
          <template #reference>
            <van-icon name="ellipsis" size="30" />
          </template>
        </van-popover>
      </template>
    </van-nav-bar>
    <van-share-sheet
      v-model:show="showShare"
      title="立即分享给好友"
      :options="shareOptions"
      @select="onShareSelect"
    />
    <div class="content">
      <div class="banner">
        <van-swipe ref="swipe">
          <van-swipe-item
            v-for="(item, index) in detailBanners"
            :key="index"
            @click="handleSwipeItemClick(index)"
          >
            <img :src="item" alt="" srcset="" />
          </van-swipe-item>
        </van-swipe>
        <div class="btn-play ignore" @click="handleVideoPlay">
          <van-icon name="play-circle" />
          <span class="time">{{ videoTime }}</span>
        </div>
        <van-popup @close="handlePopupClose" v-model:show="showVideo">
          <video
            ref="video"
            controls
            src="https://jvod.300hu.com/vod/product/b1024a62-8c46-464c-8ec7-f57d26cceb38/42f70c8e8bbb442e986874ec556fc882.mp4"
            preload
          ></video>
        </van-popup>
      </div>
      <h3 class="price">
        ￥ <span class="price-value">{{ price }}</span>
      </h3>
      <h3 class="detail-name">
        <van-tag type="danger">自营</van-tag>
        <span class="name">{{ proname }}</span>
      </h3>
    </div>
    <div class="details-footer">
      <van-action-bar>
        <van-action-bar-icon icon="cart-o" to="/cart" text="购物车" />
        <van-action-bar-button type="warning" @click="handleAddCart" text="加入购物车" />
        <van-action-bar-button type="danger" v-show="flag" text="立即购买" />
        <van-action-bar-button type="danger" v-show="!flag" disabled text="已下架" />
      </van-action-bar>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { useHeader, useDetails, useFooter } from '@/hooks/detailsHook'
import { ref } from 'vue'
// 注意这里的ref如果写到hooks中会有问题
const video = ref()
const swipe = ref()

const {
  showPopover,
  actions,
  onSelect,
  handleRouterBack,
  showShare,
  shareOptions,
  onShareSelect,
} = useHeader()

const {
  detailBanners,
  handleSwipeItemClick,
  handleVideoPlay,
  videoTime,
  showVideo,
  handlePopupClose,
  price,
  proname,
} = useDetails(video, swipe)

const { flag, handleAddCart } = useFooter()
</script>

<style lang="scss" scoped>
.content {
  .van-swipe-item {
    img {
      width: 100%;
    }
  }
  .banner {
    position: relative;
    .ignore {
      background: #fff;
      position: absolute;
      left: 50%;
      bottom: 5%;
      transform: translate(-50%, -50%);
      font-weight: bold;
      font-size: 30px;
      text-align: left;
      box-sizing: border-box;
      padding: 0 8px 0 2px;
      width: 85px;
      height: 30px;
      border-radius: 18px;
      display: flex;
      justify-content: space-between;
      cursor: pointer;
      opacity: 0.95;
      .van-icon {
        color: #ee0a24;
      }
      .time {
        font-size: 12px;
        color: #262626;
        line-height: 30px;
      }
    }
    video {
      width: 100%;
    }
  }
  .price {
    text-align: left;
    font-weight: bold;
    font-size: 15px;
    color: #ee0a24;
    padding-left: 15px;
    margin: 5px;
    .price-value {
      font-size: 20px;
    }
  }
  .detail-name {
    text-align: left;
    padding: 0 15px;
    margin: 5px;
    .van-tag {
      margin-right: 3%;
      transform: translateY(-20%);
    }
  }
}
</style>
